<template>
    <el-container style="height:100%">
        <!-- 头部区域 -->
        <el-header>
                <img class="avatar_box"  src="../assets/logo.png" alt="" />
                <span>智能健康监测系统</span>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!-- 页面区域 -->
    <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
            <!-- 控制侧边栏是否折叠 -->
             <el-button icon="el-icon-s-operation" circle @click="toggleColapse"></el-button>
    <el-menu
      class="el-menu-vertical-demo"
      :collapse='isCollapse'
      :collapse-transition='false'
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
      :default-active="activePath">
      <el-menu-item index="/statistics" @click="saveNavState('/statistics')">
        <i class="el-icon-s-data"></i>
        <span slot="title">数据统计</span>
      </el-menu-item>
      <el-menu-item index="/employee" @click="saveNavState('/employee')">
        <i class="el-icon-s-custom"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/function" @click="saveNavState('/function')">
        <i class="el-icon-s-cooperation"></i>
        <span slot="title">设备功能</span>
      </el-menu-item>
      <el-menu-item index="/device" @click="saveNavState('/device')">
        <i class="el-icon-s-grid"></i>
        <span slot="title">设备管理</span>
      </el-menu-item>
      <el-menu-item index="/category" @click="saveNavState('/category')">
        <i class="el-icon-menu"></i>
        <span slot="title">设备分类</span>
      </el-menu-item>
      <el-menu-item index="/serve" @click="saveNavState('/serve')">
        <i class="el-icon-s-claim"></i>
        <span slot="title">报修服务</span>
      </el-menu-item>
      <el-menu-item :index="'/user'" @click="saveNavState('/user')">
        <i class="el-icon-s-management"></i>
        <span slot="title">个人信息</span>
      </el-menu-item>
    </el-menu>
        </el-aside>
        <!-- 右侧主体内容 -->
        <el-main>
            <!-- 路由占位符 -->
            <router-view></router-view>
        </el-main>
    </el-container>
    </el-container>
</template>

<script>
export default {
    data(){
        return{
        //默认关闭折叠
        isCollapse: false,
        //被激活的地址
        activePath:' '
        }
    },
    created(){
        this.activePath = window.sessionStorage.getItem('activePath')
    },
    methods:{
    logout () {
      window.sessionStorage.clear()//清除session
      this.$router.push('/login')
    },
      // 折叠按钮
    toggleColapse () {
      this.isCollapse = !this.isCollapse
    },
    //保存链接的激活状态
    saveNavState(activePath){
    window.sessionStorage.setItem('activePath', activePath)
    this.activePath = activePath
    }
    }
}
</script>

<style lang="less" scoped>
.avatar_box {
  height: 50px;
  width: 50px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 0 10px #ddd;
  //position: absolute;
  //
  //left: 5px;
  //top:5px;
  //transform: translate(-50%, -50%);
  background-color: #fff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
}
.el-header {
    background-color: #455a6e;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
    div{
        display: flex;
        align-items: center;
        img{
            width: 60px;
            height: 60px;
        }
        span{
            margin-left: 15px;
        }
    }
}
.el-aside{
    background-color: #545c64;
    .el-button{
        background-color: #545c64;
        border: none;
        width: 100%;
        color: white;
    }
    .el-menu{
        border-right: none;
    }
}
</style>